<template>
	<div id="screen-shot">
		<ApplyReport
			:nowRowData="{
				tableRel: tableRel,
			}"
			:creditCode="creditCode"
			:applyNo="applyNo"
			:approvalStatus="-2"
			:isDetail="true"
			:params="params"
		>
			<el-scrollbar max-height="50vh">
				<div class="progress-box">
					<div class="time-line">
						<div class="time-line-item" v-for="(item, index) in lineTimeList" :key="index">
							<div class="time-line-item-header flex space-between align-center">
								<p class="text-time">{{ formatCreateTime(item.createTime) }}</p>
								<div :class="item.approvalStatus == 3 ? 'text-error-tag' : 'text-success-tag'" v-if="item.statusLabel">{{ item.statusLabel }}</div>
							</div>
							<p class="text-title">{{ approvalHierarchyLabel[item.approvalHierarchy] || item.createUserName }}</p>
							<p class="text-value" v-if="item.approvalRemarks">{{ item.approvalRemarks }}</p>
							<p class="text-value" v-if="item.currentApproval">节点审批人：{{ item.currentApprovalUserName }}</p>
							<FileList v-if="item.approvalImgs" :value="item.approvalImgs" />
						</div>
					</div>
				</div>
			</el-scrollbar>
		</ApplyReport>
	</div>
</template>

<script setup lang="ts">
import apiMod from '@/apiMod/index'
import ApplyReport from '@/views/instOperate/apply/ReportDetail/index.vue'
import { onMounted } from 'vue'
import FileList from '@/views/aplid/DetailPage/ContentListItem/FileList/index.vue'
import { useDateFormat } from '@vueuse/core'

const props = withDefaults(
	defineProps<{
		creditCode?: string | number
		applyNo?: string | number
		belongDate?: string | number
		subsidyProjectId?: string | number
		tableRel?: string | number
		workflowRandom: string | number
		fromId: string | number
		organizationId?: string | number
	}>(),
	{}
)

const params = ref({
	belongDate: props.belongDate,
	subsidyProjectId: props.subsidyProjectId,
	organizationId: props.organizationId,
})

const approvalHierarchyLabel = {
	'1': '社区',
	'2': '街道',
	'3': '区',
	'4': '市',
	'5': '第三方',
}

const lineTimeList = ref([])

const formatCreateTime = (time) => {
	const ntme = useDateFormat(time, 'YYYY年MM月DD日 HH:mm:ss')
	return ntme.value
}

const statusLabel = {
	'-1': '作废',
	'0': '待审批',
	'1': '审批中',
	'2': '通过',
	'3': '驳回',
}

const getInitData = () => {
	let params = {
		fromId: props.fromId,
		randomNo: props.workflowRandom,
	}
	apiMod.view_workflowApprovalLogic_process(params).then((res) => {
		lineTimeList.value = (res.data || [])
			.map((item) => {
				return {
					...item,
					statusLabel: statusLabel[item.approvalStatus],
				}
			})
			.reverse()
			.filter((item) => item.id)
	})
}

onMounted(() => {
	getInitData()
})
</script>

<style scoped lang="scss">
.config-content {
	padding: 12px;
	margin-top: 20px;
	border: 1px solid #dcdcdc;
	border-radius: 10px;
}
.btn-save {
	min-width: 64px;
	height: 25px;
	border-radius: 4px;
	background: #0052d9;
	font-family: 'Microsoft YaHei';
	font-weight: 400;
	font-size: 16px;
	color: #fff;
}
@import '@/views/instOperate/components/styles/progress.scss';
</style>
